$def with ()

$var title: SIP Irrigation Control
$var page: home

$code:
	tf = gv.sd["tf"]
	snames = gv.snames
	
$code:
    if gv.pon and not gv.pon > len(gv.pnames):
        sipPname = gv.pnames[gv.pon - 1]
    else:
        sipPname = ""	

$code:
	def two_digits(n):
	    return '%02d' % int(n)

$code:
    def plugin_adjustment():
        duration_adjustments = [gv.sd[entry] for entry in gv.sd if entry.startswith('wl_')]
        result = 100.0
        for entry in duration_adjustments:
            result *= entry/100.0
        return '%.0f' % result

$code:
    def plugin_adjustment_list():
        duration_adjustments = [gv.sd[entry] for entry in gv.sd if entry.startswith('wl_')]
        result = []
        for entry in duration_adjustments:
            result.append('%.0f%%' % entry)
        return ' * '.join(result)

$code:
    def total_adjustment():
        duration_adjustments = [gv.sd[entry] for entry in gv.sd if entry.startswith('wl_')]
        result = float(gv.sd["wl"])
        for entry in duration_adjustments:
            result *= entry/100.0
        return '%.0f' % result

<script>
    let priorRs = ${gv.sd["rs"]};
    let useRainsense = ${gv.sd["urs"]};
    let pluginStn = $:{json.dumps(gv.pluginStn, ensure_ascii=False)};
    let progNames = Array.from($:{gv.pnames});
    let h = 0;
    let w = 100;
    
    function formatLogline(log) {
        let lrsid = lrun[0], lrpid = lrun[1], lrdur = lrun[2], lret = lrun[3];
        if (lrpid == 0) {
            return "n/a";
        }
        let pname = "P" + lrpid;
        
        if (lrpid == 255 || lrpid == 99) {
            pname = $:{json.dumps(_('Manual Mode'), ensure_ascii=False)};
        }
        if (lrpid == 254 || lrpid == 98) {
            pname = $:{json.dumps(_('Run Once Program'), ensure_ascii=False)};
        }
        

        let runDate = (new Date(lret * 1000)).toString(); // + timezoneSuffix; //dk
        return snames[lrsid] + $:{json.dumps(_(' ran '), ensure_ascii=False)} + pname + $:{json.dumps(_(' for '), ensure_ascii=False)} + (lrdur / 60>>0) + "m" + (lrdur % 60) + "s" + $:{json.dumps(_(' on '), ensure_ascii=False)} + runDate;
    }

    function updateStatus(status) {
        let display, updateInterval = 30000;
        for (let s=0; s<status.length; s++) {
            let station = status[s];
            let classes = "noNewline stationStatus station_" + station.status;
            switch (station.reason) {
                case "program" :
                    let minutes = Math.floor(station.remaining / 60);
                    let seconds = Math.floor(station.remaining - 60*minutes);
                    if (minutes < 10) {minutes = "0"+minutes;}
                    if (seconds < 10) {seconds = "0"+seconds;}
                    if (station.status == "on") {
                    	if (station.programName == "Node-red Program" && station.remaining == 0) {
                    		display = $:{json.dumps(_('On'), ensure_ascii=False)};
                    	}
                    	else {
                        display = minutes+":"+seconds;
	                        if (typeof pluginStn !== 'undefined' && pluginStn.length) {
	                      	pluginStn.forEach(
	                      	function(item, idx) {
	                      		if (pluginVals) {
		                      		display = display + ", " +  item[0] + ": " + pluginVals.sdata[idx];
	                      		}
	                      		else {
	                      			display = display + ", " +  item[0] + ": " + item[1];
	                      		}
	                      	});
	                        }
	                        }                        
                        
                    } else {
                        display = "(" + minutes+":"+seconds + ")";
                    }
                    updateInterval = 1000;
                    break;
                case "master" :
                    classes += " master";
                    if (station.status == "on") {
                        display = $:{json.dumps(_('Master On'), ensure_ascii=False)};
                    } else {
                        display = $:{json.dumps(_('Master Off'), ensure_ascii=False)};
                        classes += " strike";
                    }
                    break;
                case "rain_delay" :
                    display = $:{json.dumps(_('Suppressed by Rain Delay'), ensure_ascii=False)};
                    break;
                case "rain_sensed" :
                    display = $:{json.dumps(_('Suppressed by Rain Sensor'), ensure_ascii=False)};
                    break;
                default:
                    display = $:{json.dumps(_('Off'), ensure_ascii=False)};
            }
            jQuery("td#status" + station.station)
                .text(display)
                .removeClass()
                .addClass(classes);
        }
        setTimeout(statusTimer,updateInterval);
        if (updateInterval > 1000) {

            displayProgram();
        }
    }
    function statusTimer() {
        jQuery.getJSON("/api/status", updateStatus)
    }

    function countdownTimer(el) {
        alert(jQuery(el).html());
    }

    function rainChange() {
    	jQuery.get("rss", function(data){
	    	if(priorRs != data) {
	    		priorRs = data;
	    		location.reload(true);
	    	}
    	})
    }
    
    let restarted = ${gv.restarted};
    
    // Initialize behaviors
    jQuery(document).ready(function(){
    	if(useRainsense){
    		let rainCheck = setInterval(rainChange, 10000);
    	}
    	
        if(restarted == 0) {
        	alert("SIP could not restart.\nPlease restart the program from the command line.");
        }
        
        $# Code to clear mamual mode page after timed run
        $ flat_list = [item for sublist in gv.ps for item in sublist]
        $ idxt = 0
        $ remTime = 0
        $if 99 in flat_list:
        	$ idxt = flat_list.index(99) + 1
        	$ remTime = flat_list[idxt]              
		if($remTime) {
			setTimeout(refreshPage, ${remTime + 1} * 1000);		
		}
		
        $if gv.sd['mm'] == 0:
            statusTimer();

        jQuery("button#cStartStop").click(function(){
            jQuery("form[name='hf'] input[name='en']").val(1-en);
            jQuery("form[name='hf']").submit();
        });

        jQuery("button#cManual").click(function(){
            jQuery("form[name='hf'] input[name='mm']").val(1-mm);
            jQuery("form[name='hf']").submit();
        });

        jQuery("button#cRainDelay").click(function(){
            if (rd != 0) {
                h = 0;
            } else {
                h = prompt($:{json.dumps(_('Enter hours to delay'), ensure_ascii=False)},"0");
            }
            if (h < 0) {
                h = prompt("Delay must be a positive value","0");
            }
            if (h != null && h >= 0){
                jQuery("form[name='hf'] input[name='rd']").val(h);
                jQuery("form[name='hf']").submit();

            }
        });

        jQuery("button#cWaterLevel").click(function(){
            if (wl != 100) {
                w = 100;
            } else {
                w = prompt($:{json.dumps(_('Enter percentage adjustment'), ensure_ascii=False)},wl);
            }
            if (w != null){
                jQuery("form[name='hf'] input[name='wl']").val(w);
                jQuery("form[name='hf']").submit();
            }
        });

        jQuery("button.manual").click(function () {
            sid = parseInt(jQuery(this).attr("id"));
            sbit = jQuery(this).hasClass("on");
            if (sbit) {
                window.location = "/sn?sid="+(sid+1)+"&set_to=0"; // turn off station
            } else {
                let strmm = jQuery("#mm"+sid).val();
                let strss = jQuery("#ss"+sid).val();
                let mm = (strmm == "" ? 0 : parseInt(strmm));
                let ss = (strss == "" ? 0 : parseInt(strss));
                if (!(mm >= 0 && ss >= 0 && ss < 60)) {
                    alert($:{json.dumps(_('Timer values wrong: '), ensure_ascii=False)} + strmm + ":" + strss);
                    return;
                }
                window.location = "/sn?sid=" + (sid+1) + "&set_to=1" + "&set_time=" + (mm*60+ss);  // turn it off with timer
            }
        });

        jQuery("button#pStopAll").click(function(){
            window.location = "/cv?rsn=1";
        });

        jQuery("button#pPrev").click(function() {
            displayScheduleDate.setDate(displayScheduleDate.getDate() - 1);
            displayProgram();
        });
        jQuery("button#pToday").click(function() {
            let day = new Date(Date.now() + tzDiff);
            displayScheduleDate.setDate(day.getDate());
            displayScheduleDate.setMonth(day.getMonth());
            displayProgram();
        });
        jQuery("button#pNext").click(function() {
            displayScheduleDate.setDate(displayScheduleDate.getDate() + 1);
            displayProgram();
        });

        jQuery(".countdown").each(function() {
            countdownTimer(jQuery(this).attr('id'));
        });
    });

    function countdownTimer(timerId) {
        let timerElement = jQuery("#" + timerId);
        let timerValue = parseFloat(timerElement.attr("data"));
        let remaining = timerValue - Date.now(); // DK change - was devt;
        let rHours = Math.floor(remaining / 3600000);
        let rMinutes = Math.floor((remaining%3600000) / 60000);
        if (rHours <=0 && rMinutes <=0) {
            window.location = "/";
        } else {
            timerElement.text((rHours<10 ? "0" : "") + rHours + ":" + (rMinutes<10 ? "0" : "") + rMinutes);
            setTimeout("countdownTimer('" + timerId + "')", 2000);
        }
    }
</script>
<div id="options">
    <button id="cStartStop" class="toggle ${'on' if gv.sd['en'] else 'off'}"><span class='toggleleft'>$_('System On')</span><span class='togglesep'>&nbsp;</span><span class='toggleright'>$_('System Off')</span></button>
    <br>
    <button id="cWaterLevel" class="toggle choice ${'on' if gv.sd['wl']==100 else 'off'}"><span class='toggleleft'>$_('Normal')</span><span class='togglesep'>&nbsp;</span><span class='toggleright'>${_('Water Level') if gv.sd['wl']==100 else str(gv.sd['wl']) + '%' + _('Level')}</span></button><span class="noNewline">${'' if int(plugin_adjustment()) == 100 else _(' Plugin adjustments: ') + plugin_adjustment_list() + ('' if gv.sd['wl']==100 and '*' not in plugin_adjustment_list() else ' - Total adjustment: ' + total_adjustment() + '%')}</span>
    <br>
    <button id="cRainDelay" class="toggle ${'off' if gv.sd['rd'] or (gv.sd['urs'] and gv.sd['rs']) else 'on'}"><span class='toggleleft'>$_('Active')</span><span class='togglesep'>&nbsp;</span><span class='toggleright'>$_('Rain Delay')</span></button><span class="noNewline">${'' if gv.sd['rdst'] - gv.now <= 0 else _( 'Rain delay time left' ) + ': ' +  str((int(gv.sd['rdst'] - gv.now) // 3600)) + ':' + str(int((gv.sd['rdst'] - gv.now) % 3600 // 60)).zfill(2)}</span>

    $if gv.sd['urs']:
        <span class="rainsense">${'' if gv.sd['rs'] else _('no')} $_('rain sensed')</span>
    <br>
    <button id="cManual" class="toggle choice ${'off' if gv.sd['mm'] else 'on'}"><span class='toggleleft'>$_('Auto')</span><span class='togglesep'>&nbsp;</span><span class='toggleright'>$_('Manual')</span></button>
</div>

<div id="stationsdiv">

$if gv.sd['mm']:
    <div id="manualmode">
        <table id="stations" class="stationList">
        $# Manual program control formatting
        $for bid in range(0, gv.sd['nbrd']):
            $for s in range(0,8):
                $ sid = bid*8 + s;
                $ sbit = (gv.sbits[bid]>>s)&1
                $ show = (gv.sd['show'][bid]>>s)&1
                $ revals = gv.srvals
                $revals.reverse()
                
                $if show == 1:
                    <tr>
                        <td class='station_name'>${snames[sid]}</td>
                        $if sid + 1 == gv.sd['mas']:
                            $if revals[sid]:
                                <td class="master station_on">$_('On (Master)')</td>
                            $else:
                                <td class="master station_off">$_('Off (Master)')</td>   
                        $else:
                            $ rem = gv.ps[sid][1]
                            $if rem > 65536:
                                $ rem = 0
                            <td class="station_running noNewline">
                                <button class='toggle manual narrow ${'on' if sbit else 'off'}' id='${sid}'><span class='toggleleft'>$_('On')</span><span class='togglesep'>&nbsp;</span><span class='toggleright'>$_('Off')</span></button>
                                    <label class="timeInput">${'in' if sbit else 'for'}
                                <input type='number' id='mm${sid}' size='2' maxlength='3' value='${two_digits(rem/60)}'/>:</label>
                                <label class="timeInput"><input type='number' id='ss${sid}' size='2' maxlength='2' value='${two_digits(rem%60)}'/> (mm:ss)</label>
                            </td>
                    </tr>
        </table></div>

$else:
    <div id="programmode">
        <table id="stations" class="stationList">
            <tr>
                <td colspan="2"></td>
                <td colspan="8">
                    <span id="displayScheduleDate"></span>
                </td>
                <td colspan="16" style="text-align:right">
                    <button id="pPrev" class="execute">&lt;&lt;$_(' Prev Day')</button>
                    <button id="pToday" class="execute">$_('Today')</button>
                    <button id="pNext" class="execute">$_('Next Day') &gt;&gt;</button>
                </td>
            </tr>
            <tr><td colspan="2">
                <td class="scheduleTick scheduleHeader">${'00:00' if tf else '12 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'01:00' if tf else '1 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'02:00' if tf else '2 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'03:00' if tf else '3 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'04:00' if tf else '4 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'05:00' if tf else '5 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'06:00' if tf else '6 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'07:00' if tf else '7 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'08:00' if tf else '8 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'09:00' if tf else '9 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'10:00' if tf else '10 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'11:00' if tf else '11 AM'}</td>
                <td class="scheduleTick scheduleHeader">${'12:00' if tf else '12 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'13:00' if tf else '1 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'14:00' if tf else '2 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'15:00' if tf else '3 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'16:00' if tf else '4 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'17:00' if tf else '5 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'18:00' if tf else '6 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'19:00' if tf else '7 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'20:00' if tf else '8 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'21:00' if tf else '9 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'22:00' if tf else '10 PM'}</td>
                <td class="scheduleTick scheduleHeader">${'23:00' if tf else '11 PM'}</td>
            </tr>
            $ odd = 1
            $for bid in range(0, gv.sd['nbrd']):
                $for s in range(0,8):
                    $ sid = bid*8 + s;
                    $ sn = sid + 1
                    $ show = (gv.sd['show'][bid]>>s)&1
                    $if show == 1:
                        <tr class="stationSchedule ${'odd' if odd else 'even'}" id='schedule${sid}' data="${sid}">
                            <td class='station_name'>${snames[sid]}</td>
                            <td id='status${sid}' class="stationStatus">$_('loading...')</td>
                            <td class="scheduleTick" data="0"></td>
                            <td class="scheduleTick" data="1"></td>
                            <td class="scheduleTick" data="2"></td>
                            <td class="scheduleTick" data="3"></td>
                            <td class="scheduleTick" data="4"></td>
                            <td class="scheduleTick" data="5"></td>
                            <td class="scheduleTick" data="6"></td>
                            <td class="scheduleTick" data="7"></td>
                            <td class="scheduleTick" data="8"></td>
                            <td class="scheduleTick" data="9"></td>
                            <td class="scheduleTick" data="10"></td>
                            <td class="scheduleTick" data="11"></td>
                            <td class="scheduleTick" data="12"></td>
                            <td class="scheduleTick" data="13"></td>
                            <td class="scheduleTick" data="14"></td>
                            <td class="scheduleTick" data="15"></td>
                            <td class="scheduleTick" data="16"></td>
                            <td class="scheduleTick" data="17"></td>
                            <td class="scheduleTick" data="18"></td>
                            <td class="scheduleTick" data="19"></td>
                            <td class="scheduleTick" data="20"></td>
                            <td class="scheduleTick" data="21"></td>
                            <td class="scheduleTick" data="22"></td>
                            <td class="scheduleTick" data="23"></td>
                        </tr>
                    $ odd = 1 - odd
            <tr>
                <td colspan="2"></td>
                <td colspan="24" id="legend" style="text-align:center"></td>
            </tr>
        </table>
    </div>
</div>

<div>
    <form name="hf" action="/cv" method="get">
        <input type="hidden" name="en">
        <input type="hidden" name="mm">
        <input type="hidden" name="rd">
        <input type="hidden" name="wl">
        <input type="hidden" name="rbt" value="0">
    </form>
</div>  
<div class="controls">
    <button id="pStopAll" class="execute delete">$_('Stop All Stations')</button>
</div>
